<template>
  <div>
		<div v-if="chenload">
				<div id="tab" v-if='arr!=""'>
			       <mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
					<div class="top">
						<p>{{arr.title}}</p>
						<span>文章来源：{{arr.source}}</span>
						<span>{{arr.addtime}}</span>
					</div>
					<div class="chenline-pay"></div>
					<div class="con" v-html="arr.content">
						<div></div>
					</div>
					<div class="chenline-pay"></div>
					<div class="xg" v-if="arr1.length>0">
						<div class="x">
							<p></p>
							<p>相关资讯</p>
						</div>
						<div class="ya" v-for="(item,index) in arr1" @click="zi(item)">
							<img :src="img+item.images" alt="" class="img2">
							<div>
								<p>{{item.title}}</p>
								<p class="p1">
									<img src="../../../src/assets/img/shouye/dian.png" alt="" class="img1">
									<span>{{item.comment}}</span>
									<img src="../../../src/assets/img/shouye/yan.png" alt="" class="i">
									<span>{{item.reading}}</span>
								</p>
							</div>
						</div>
					</div>
					<div class="chenline-pay"></div>
					<!--最下面-->
					<div class="xg1">
							<div class="x">
								<p></p>
								<p>评论</p>
							</div>
						<!-- <div> -->
						    <div id="tabList">
								<div class="clearfix" style="width: 92%;margin: auto" v-for="(item,index) in tab0.list" @click="likeReply(item.id,item.is_praise,item.rpraise,index)">
									<div style="height: 0.66rem;margin-top: 0.2rem;">
										<img v-if="item.avatar!=''" :src="item.avatar" alt="" class="img">
										<img v-else :src="avatarimg" alt="" class="img">
										<div class="name">
											<p>{{item.nickname}}</p>
											<p>{{item.addtime}}</p>
										</div>
									</div>
									
									<p class="pp">{{item.reply | base64Decode}}</p>
									<!-- <p class="pp">{{pinglunarr[index]}}</p> -->
									<p class="zxzan" v-if="item.is_praise==1||item.is_praise=='1'">
										<img src="../../../src/assets/img/buy/zan.png" alt="">
										<span style="color: #0287FF;">{{item.rpraise}}</span>
									</p>
									<p class="zxzan" v-else>
										<img src="../../../src/assets/img/buy/huizan.png" alt="">
										<span>{{item.rpraise}}</span>
									</p>
									<p class="grayx"></p>
								</div>
					        </div>
				   </div>
					</mescroll-vue>
					<!--底部评论-->
					<div class="in">
						<textarea type="text" maxlength='200' placeholder="点击评论" v-model="comment"></textarea>
						<button @click.stop="com()">评论</button>
					</div>
				</div>
				<div v-else class="chen-kongbai">
					<div class="chen-kongpic">
						<img src="../../../src/assets/img/nopinlun.png" mode=""></img>
					</div>
					<div class="chen-kong-text"><span>暂时没有找到您所</span><span>需要的内容…</span></div>
				</div>
				<img src="../../../src/assets/img/goback.png" alt="" class="goback" @click="goback()">
				
				<!-- 登录弹窗 -->
				<div class="shoewr-chenhoupass">
					<div class="chen-contener chenpass">
						<p class="chen-title">提示</p>
						<p class="chen-text chen-textactive">您需要先登录?</p>
						<div class="chen-but">
							<p class="chen-but-no" @click="repeatclose()">取消</p>
							<p class="chen-but-yes chen-but-yesactive" @click="repeatclick()">去登录</p>
						</div>
					</div>
				</div>
			
		</div>
		<div class="loadmore" v-else>
			<img src="../../../src/assets/img/load.gif" alt="">
		</div>
  </div>
</template>

<script>
	import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
        name: "Zx",
		components: {
		  MescrollVue
		},
      data(){
          return{
						imgSrc3:require('../../assets/img/kongbai.png'),
						tab0: {mescroll: null, list: [], isListInit: false}, // 全部
						noloadzheng:false,
						chenload:false,
						avatarimg:this.$store.state.avatarimg,
						id:'',
            arr:'1',
            arr1:[],
            pinglun:[],
			      pinglunarr:[],
            img:this.$store.state.img,
            comment:'',
						count:'',
						allLoaded:false,
						page:1,
						tabType: 0 ,// 菜单类型
          }
      },
      methods:{
        goback(){
          this.$router.push({
            path:'/'
          })
        },
		// 点击取消
		repeatclose(){
			$('.shoewr-chenhoupass').fadeOut();
		},
		// 点击去登录
		repeatclick(){
			$('.shoewr-chenhoupass').fadeOut();
			this.d();
		},
		// 点击评论
        com(){
			if(localStorage.getItem('token')){
				var comm = this.comment;
				var name = comm.replace(/\s+/g, "");
				if (name!=''){
					var data = {
						id:this.id,//资讯的id
						reply:Base64.encode(name)//回复内容
					}
					this.axios.post(this.$store.state.url + "info/Reply",data).then(res=> {
						if (res.data.errcode == 0||res.data.errcode == '0'){
							this.comment = '';
							this.$toast({
								message:'评论成功',
								position:'bottom'
							});
							// this.allLoaded = false;
							this.changeTab();
						}else{
							this.$toast({
								message:res.data.msg,
								position:'bottom'
							});
						}
					})
				}else {
					this.$toast({
						message:'请输入内容',
						position:'bottom'
					});
				}
			}else{
				$('.shoewr-chenhoupass').fadeIn();
			}
        },
        zi(item){
          this.$router.push({
            path:'/News',
            query:{
              nid:item.id
            }
          })
        },
		// 评论点赞	
		likeReply(id,is_praise,rpraise,index){
			if(localStorage.getItem('token')){
				this.axios({
					url:this.$store.state.url + "info/likeReply",
					params:{
						iid:this.id,
						id:id,
					}
				}).then(res=>{
				  // console.log(res.data);
				  if (res.data.errcode == 0||res.data.errcode == '0'){
						if(is_praise==0||is_praise=='0'){
							this.$toast({
								 message:'点赞成功',
								 position:'center'
							});
							this.tab0.list[index].rpraise = Number(this.tab0.list[index].rpraise)+1;
							this.tab0.list[index].is_praise = 1;
						}else{
							this.tab0.list[index].rpraise = Number(this.tab0.list[index].rpraise)-1;
							this.tab0.list[index].is_praise = 0;
						}
				  }else{
					  this.$toast({
					  	 message:res.data.msg,
					  	 position:'center'
					  });
				  }
				})
			}else{
				$('.shoewr-chenhoupass').fadeIn();
			}
		},
				
		 // 切换菜单
		changeTab () {
		  this.tab0.list = []// 在这里手动置空列表,可显示加载中的请求进度
		  this.getTabData(0).mescroll.resetUpScroll() // 刷新列表数据
		},
		// 获取菜单对应的数据
		getTabData () {
		   return this.tab0;
		},
		// mescroll组件初始化的回调,可获取到mescroll对象
		mescrollInit0 (mescroll) {
		  // mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
		  this.tab0.mescroll = mescroll;
		},
		// 多mescroll的配置,需通过方法获取,保证每个配置是单例
		getMescrollUp (type) {
		  return {
		    auto: true,
		    callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
		    noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
			empty: {
			  warpId: 'tabList', // 父布局的id;
			  icon: this.imgSrc3, // 图标,默认null
			  tip: '暂时还没有人评论，快抢沙发吧...', // 提示
			  
			},
		  }
		},
		upCallback (page, mescroll) {
			var that = this;
		  // if (mescroll.tabType === 0) {
		    // 学习中
		    // that.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
			that.axios.get(that.$store.state.url +'info/infoReply',{
				params:{
					id:that.id,
					page:page.num,
					limit:page.size
				}
			}).then(res=>{
				// console.log(111)
			 // that.chenload=true;
			 if(res.data.errcode==0||res.data.errcode=='0'){
				 var curPageData = res.data.data.lists;
				 that.count=res.data.data.count;
				 // console.log(that.count)
				  mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				 if (page.num === 1) that.tab0.list = []; // 如果是第一页需手动制空列表
				 that.tab0.list = that.tab0.list.concat(curPageData); // 追加新数据
			 }
			})
			
		  // }
		},
      },
      mounted(){
				this.sdk.getJSSDK('','',this.$store.state.url);	
				this.loginsuccess();
				this.id=this.$route.query.nid;
				// 获取详情
				this.axios({
					url:this.$store.state.url + "info/information",
					headers:this.$store.state.headers,
					params:{
						id:this.id
					}
				}).then(res=>{
							// console.log(res.data)
					this.chenload=true;
							if (res.data.errcode == 0||res.data.errcode == '0'){
					var data = res.data.data;
								this.arr = data;
								this.arr1 = data.relation;
							}
						})
				
      }
    }
</script>

<style scoped>
	/* #tabList{
		padding-bottom: 1rem;
	} */
	.mescroll {
	  position: fixed;
	  top: 0rem;
	  bottom: 0;
	  height: auto;
	  padding-bottom: 1rem;
	}
	#tab{
		width: 100%;
		overflow: hidden;
		font-size: 0.2rem;
		padding-bottom: 1.08rem;
	}
	.con img{
		width:100%;
		height:100%;
	}
  .goback{
    width: 1.2rem;
    height: 1.2rem;
    position: fixed;
    right: 0.2rem;
    bottom: 1.5rem;
  }
    .top{
      width: 100%;
      /* height: 1.31rem; */
      box-sizing:border-box;
      padding: 0.3rem;
      background: #fff;
    }
  .top p{
    font-size:0.3rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
  }
  .top span{
    display: inline-block;
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
    margin-top: 0.1rem;
  }
  .top span:nth-child(3){
    float: right;
  }
  .con{
    width: 7.5rem;
    box-sizing:border-box;
    padding: 0.3rem;
    background: #fff;
    /* margin-top: 0.2rem; */
  }
  .con div{
    width: 92%;
    margin: auto;
  }
    .con>>>img{
      max-width: 100%;
    }
    .con>>>table{
      display: block;
      max-width: 100%!important;
    }
    .con>>>span{
      white-space: normal!important;
    }
  .xg{
    width: 100%;
    /* margin-top: 0.2rem; */
    background: #fff;
    box-sizing:border-box;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }
    .xg1{
      width: 100%;
      margin-top: 0.2rem;
      background: #fff;
      box-sizing:border-box;
      padding-top: 0.3rem;
    }
  .x{
    width: 92%;
    margin: auto;
  }
  .x p:nth-child(1){
    display: inline-block;
    width:0.04rem;
    height:0.28rem;
    background:rgba(2,135,255,1);

  }
    .x p:nth-child(2){
      display: inline-block;
      font-size:0.28rem;
      font-weight:bold;
      color:rgba(51,51,51,1);
      line-height:0.32rem;
      vertical-align: top;
    }
    .ya{
      width: 92%;
      margin: auto;
      height: 1.18rem;
      margin-top: 0.3rem;
    }
    .img2{
      width: 2.1rem;
      height: 100%;
      float: left;
      border-radius:0.08rem;
    }
    .ya div{
      height: 100%;
      margin-left: 2.3rem;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }

    .ya div p:nth-child(1){
      width: 4.6rem;
      font-size:0.28rem;
      color:rgba(51,51,51,1);
      line-height:0.32rem;
    }
    .img1{
      width: 0.3rem;
      height: 0.3rem;
      vertical-align: middle;
    }
    .i{
      width: 0.3rem;
      height: 0.3rem;
      margin-left: 0.2rem;
      vertical-align: middle;
    }
    .p1 span{
      font-size:0.24rem;
      color:rgba(194,201,211,1);
      line-height:0.32rem;
      vertical-align: middle;
    }
    .p1{
      margin-left: 2.7rem;
    }
    .img{
      width: 0.66rem;
      height: 100%;
      float: left;
      border-radius: 50%;
    }
    .name{
      float: left;
      height: 100%;
      margin-left: 0.2rem;
    }
    .name p:nth-child(1){
      font-size:0.28rem;
      color:rgba(51,51,51,1);
      line-height:0.32rem;
    }
    .name p:nth-child(2){
      font-size:0.24rem;
      color:rgba(194,201,211,1);
      line-height:0.32rem;
      margin-top: 0.05rem;
    }
    .pp{
      font-size: 0.24rem;
      color: #333333;
      margin-top: 0.2rem;
      margin-left: 0.85rem;
	  word-wrap:break-word;
    }
		.zxzan{
			float: right;
			/* padding-bottom: .3rem; */
		}
		.zxzan img{
			width: .27rem;
			height: .27rem;
		}
		.zxzan span{
			color: #C2C9D3;
			font-size: .22rem;
		}
  .grayx{
    height: 0.02rem;
    background: rgba(237,237,237,1);
    margin-top: 0.5rem;
  }
  .in{
    width: 100%;
    height:0.88rem;
    background:rgba(255,255,255,1);
    box-shadow:0 -0.03rem 0.05rem 0 rgba(71,68,80,0.06);
    opacity:0.95;
    position: fixed;
    bottom: 0;
    background:#fff;
    display: flex;
    align-items: center;
    z-index: 1;
  }
  .in textarea{
    width: 5.82rem;
    max-height: 0.56rem;
    background:rgba(240,240,240,1);
    border:0.01rem solid rgba(237,237,237,1);
    border-radius:0.28rem;
    font-size:0.24rem;
    text-indent: 0.3rem;
    margin-left: 0.3rem;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	padding:0.1rem .3rem .3rem .3rem;
  }
  textarea:focus::placeholder{
    color: transparent;
	line-height: .56rem;
  }
  textarea:placeholder-shown{
    color:rgba(153,153,153,1);
  }
  .in button{
    width:0.88rem;
    height:0.56rem;
    background:rgba(2,135,255,1);
    border-radius:0.28rem;
    font-size:0.24rem;
    color: #fff;
    border: none;
    outline: none;
    margin-left: 0.2rem;
  }
</style>
